<template>
  <div class="bpmn-de">
<!--    <el-button @click="save">保存</el-button>-->
    <fc-designer ref="designer">
      <template #handle>
        <el-button round size="medium" type="primary" @click="handleSave" icon="el-icon-edit" plain>
          保存
        </el-button>
      </template>
    </fc-designer>
  </div>
</template>

<script>
import { listBpmForm, getBpmForm, delBpmForm, addBpmForm, updateBpmForm } from "@/api/flowable/bpmForm";
import formCreate from "@form-create/element-ui";
export default {
  name: "formDesigner",
  data() {
    return {
      formDetail:{},
    };
  },
  computed: {
  },
  created() {
    getBpmForm(this.$route.query.id).then(res=>{
      this.formDetail = res.data;
      if (this.formDetail.formOption !== null && this.formDetail.formOption !== "" && this.formDetail.formFields !== null && this.formDetail.formFields !== ""){
        this.$refs.designer.setOption(JSON.parse(this.formDetail.formOption))
        this.$refs.designer.setRule(formCreate.parseJson(this.formDetail.formFields))
      }
    })

  },
  methods:{
    handleSave(){
      this.formDetail.formOption = JSON.stringify(this.$refs.designer.getOption())
      this.formDetail.formFields = formCreate.toJson(this.$refs.designer.getRule())
      updateBpmForm(this.formDetail).then((res)=>{
        this.$message.success("修改成功")
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({
          path:'/bpm/bpmForm',
        })
      })
    }
  }
};
</script>
<style scoped>
.bpmn-de {
  width: calc(100vw - 200px);
  height: calc(100vh - 84px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
</style>
